{% extends 'layout.html' %}
{% load permission %}

{% block css %}
    <style>
        .top-error-message {
            position: fixed;
            top: 48px;
            width: 200px;
            margin-left: auto;
            margin-right: auto;
            left: 0;
            right: 0;
        }
    </style>
{% endblock %}


{% block content %}
    <!-- message在页面上展示方式 -->
    {% if messages %}
        <div class="top-error-message">
            {% for obj in messages %}
                <!--  -->
                <div class="alert alert-{{ obj.level_tag }} alert-dismissible fade in" role="alert">
                    {{ obj.message }}
                </div>
            {% endfor %}
        </div>
    {% endif %}


    <a href="{% url 'order_list_add' %}" class="btn btn-primary">添加 <span class="glyphicon glyphicon-plus-sign"></span>
    </a>
    <hr>
    <div style="padding: 0 20px 0 20px">
        <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr>
                <td>订单号</td>
                <td>视频地址</td>
                <td>任务数量</td>
                <td>价格</td>
                <td>原播放量</td>
                <td>创建时间</td>
                <td>状态</td>
                <td>操作</td>
                <td>备注</td>
            </tr>
            </thead>
            <tbody>
            {% for foo in show_data %}
                <tr>
                    <td>{{ foo.oid }}</td>
                    <td>{{ foo.url }}</td>
                    <td>{{ foo.count }}</td>
                    <td>{{ foo.real_price }}({{ foo.price }})</td>
                    <td>{{ foo.old_view_count }}</td>
                    <td>{{ foo.create_datetime|date:"Y-m-d H:i:s" }}</td>
                    <td>{{ foo.get_status_display }}</td>

                    <td>
                        {% if foo.status == 1 %}
                            <a href="{% url 'order_list_cancel' pk=foo.id %}" class="btn btn-sm btn-danger">撤单</a>
                        {% else %}
                            -
                        {% endif %}
                    </td>
                    <td>
                        {% if foo.memeo %}
                            {{ foo.memo }}
                        {% else %}
                            -
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <h3 class="h3" style="color: #8686e5; text-align: center;">{{ errors }}</h3>
    <ul class="pagination">
        {{ pager_string }}
    </ul>

{% endblock %}

{% block js %}
    <script>
        // 错误框设置三秒之后隐藏
        setInterval(function () {
            $('.top-error-message').addClass('hide')
        }, 3000)
    </script>
{% endblock %}